<template>
  <div class="resource-container">
    <scroller :on-refresh="refresh" :on-infinite="infinite" ref="boxScroll">

      <div class="resource-wrap">

        <div
          v-for="(item, index) in list"
          :key="index"
          class="srcon-block"
          @click="goBookDetail(item)"
        >
          <div class="srcon-img">
            <img :src="item.img || require('@/assets/images/default-book-image.jpg')" :onerror="errorImage" />
          </div>
          <div class="srcon-info">
            <div class="srcon-tt">
              <div class='srcon-tt'>{{ item.title }}</div>
            </div>
            <div class="srcon-aothor">
              <div class='srcon-aothor'>{{ item.author }}</div>
            </div>
            <div class="srcon-publish">
              <div class='srcon-publish'>出版社：{{ item.publisher }}</div>
            </div>
          </div>
        </div>

        <Empty v-if="list.length === 0" />

      </div>

    </scroller>
  </div>
</template>

<script>
import Empty from '@/components/empty'
import { dataApi } from '@/api/api'
export default {
  name: 'Resource',
  components: {
    Empty
  },
  data () {
    return {
      loading: false,
      list: [],
      page: {
        size: 10,
        num: 1
      },
      errorImage: 'this.src="' + require('@/assets/images/default-book-image.jpg') + '"'
    }
  },
  created () {
    document.title = '资源列表'
  },
  methods: {
    infinite (done) {
      this.getList(done)
    },
    refresh (done) {
      this.list = []
      this.getList(done, 'refresh')
    },
    getList (done) {
      this.loading = true
      const params = {
        keyword: this.$route.query.keyword,
        type: this.$route.query.type,
        size: this.page.size
      }
      dataApi.keywordsList(params)
        .then(res => {
          if (res.data.code === 200) {
            const resData = res.data.data
            this.list = this.list.concat(resData.bookList)
            if (resData.bookList.length === 0) {
              this.$refs.boxScroll.finishInfinite(true)
            } else {
              done()
            }
          } else {
            this.$refs.boxScroll.finishInfinite(true)
            this.$message.error(res.data.message)
          }
        })
        .catch(() => {
          this.$refs.boxScroll.finishInfinite(true)
        })
        .finally(() => {
          this.loading = false
        })
    },
    goBookDetail (e) {
      this.$router.push({
        path: '/recommend/book',
        query: {
          ...e
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.resource-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: #f5f8fa;
}
.resource-wrap {
  padding: .16rem;
}

.srcon-block {
  height: 2.7rem;
  background: #fff;
  display: flex;
  margin-top: .16rem;
  border-radius: .16rem;
}

.srcon-block:first-of-type {
  margin-top: 0;
}

.srcon-img {
  width: 2.20rem;
  height: 100%;
  padding: .25rem .10rem .25rem .16rem;
  display: flex;
  justify-content: center;
  justify-items: center;
  overflow: hidden;
}

.srcon-img img {
  height: 100%;
}

.srcon-info {
  width: 5.00rem;
  font-size: .26rem;
  color: #555;
  line-height: .40rem;
  padding-top: .12rem;
  padding-right: .16rem;
}

.srcon-tt {
  height: .68rem;
  line-height: .68rem;
  font-size: .30rem;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srcon-aothor, .srcon-publish {
  height: .40rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srcon-detail {
  height: .80rem;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bottom-tip div {
  padding: .20rem;
  text-align: center;
  color: #555;
  font-size: .28rem;
}
</style>
